<template>
  <div class="contentCenter" style="width:750px ">
    <div class="kpiData">
      <div class="topTitle">
        <img src="../../../assets/fengjie/icon25.png" alt="">
      </div>
      <div class="numberbox">
        <div class="item">
          <div class="left">群众噪声投诉总次</div>
          <div class="right setColor">12341次</div>
        </div>
        <div class="item">
          <div class="left">噪声感知设备数量</div>
          <div class="right setColor">121台</div>
        </div>
      </div>
      <div class="titlebox">
        <span>0类功能区平均噪声</span>
        <span>1类功能区平均噪声</span>
        <span>2类功能区平均噪声</span>
        <span>3类功能区平均噪声</span>
      </div>
      <div class="conbox">
        <div class="boxitem" v-for="item in listArray" :key="item.number1">
          <div class="heng1">
            <div class="left" :class="item.status == 1 ? 'active' : ''">昼间噪声值</div>
            <div class="right">
              <span :class="item.status == 1 ? 'active' : ''">{{ item.number1 }}</span>
              <img src="../../../assets/fengjie/icon29.png" alt="" v-if="item.status == 1">
            </div>
          </div>
          <div class="heng1">
            <div class="left">夜间噪声值</div>
            <div class="right">
              <span>{{ item.number1 }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="echarttitle"></div>

    <div class="echartbox">
      <e-charts id="mycharts" ref="chart" :option="mapOption" autoresize />
      <div class="bz">
        <div class="bzitem">
          <img src="../../../assets/fengjie/icon31.png" alt="">
          <span>摄像头</span>
        </div>
        <div class="bzitem">
          <img src="../../../assets/fengjie/icon30.png" alt="">
          <span>拾音器</span>
        </div>
      </div>
    </div>

  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getMapJsonFile } from "../../../utils/mapdeal";
import * as echarts from "echarts";
import {img1, img2} from "../../../utils/image"

let listArray = ref([
  { number1: '65dB', number2: '65dB', status: 1 },
  { number1: '45dB', number2: '45dB', status: 0 },
  { number1: '55dB', number2: '55dB', status: 0 },
  { number1: '35dB', number2: '35dB', status: 0 }
])

//以下是地图相关逻辑

// 获取地图JSON文件\
const layoutSize = ref("130%");
const layoutCenterY = ref(53);
// 纵横比例
let aspectScale = ref(1);
// 缩放比例
let zoom = ref(0.8);

// 地图实例
const chart = ref(null);
// 地图配置项
let mapOption = ref({});

// 初始化地图
function initMap(mapName: any, mapData: any) {
  // 地图配置项
  mapOption.value = {
    tooltip: {
      show: true,
      trigger: 'item',// 设置该属性之后，会与series中data数据对应。注意data中对象的键名为name。如果单纯的展示数据可用此属性，不与formatter同用。
      alwaysShowContent: false,
      seriesIndex: 0,
      borderColor: '#3A96CD',
      borderWidth: 2,
      triggerOn: 'mousemove',
      enterable: false,
      padding: 0,
      textStyle: {
        color: '#DADADA',
        fontSize: '14',
        width: 20,
        height: 30,

        overflow: 'break'
      },
      className: 'mapTooltip',
      formatter(params: any) {
        return `<div style="height: 340px;width: 264px;display: flex; flex-direction: column;align-items: left;box-sizing: border-box;padding:10px;background:#0A3783;">
              <div class="mapTitle"><div class="mapIcon"></div>${params.name}</div>
              <div class="mapSmallTitle" style="margin:10px 0 0 0"><div class="mapOutBox"><div class="mapInlineBox"></div></div> 物联网感知设备 </div>
              <div style="margin:5px 0"><span style="color:#CCCCCC">噪声感知设备：</span> 20个 </div>
              <div style="margin:5px 0"><span style="color:#CCCCCC">拾音设备：</span> 12个 </div>
              <div style="margin:5px 0"><span style="color:#CCCCCC">提供线索总数：</span> 122个 </div>
              <div>  </div>
              <div class="mapSmallTitle" style="margin:25px 0 5px 0"><div class="mapOutBox"><div class="mapInlineBox"></div></div> 群众投诉 </div>
              <div style="margin:5px 0"> 合作体检机构总数：122个 </div>
              <div style="margin:5px 0"> 协助拘留所总数：22个 </div>
            </div>`
      },
    },
    visualMap: {
      itemWidth: 20,
      itemHeight: 8,
      padding: 10,
      // 组件上下两端文字
      text: ['待完结投诉线索条数'],
      // 显示标签
      itemStyle: 'roundRect',
      showLabel: true,
      itemGap: 20,
      hoverLink: true,
      borderColor: '#FFFFFF',
      borderWidth: 2,
      textStyle: {
        color: '#FFFFFF',
      },
      inRange: {
        color: 'red',
      },
      outOfRange: {
        color: '#0992f0',
      },
      right: '3%',
      bottom: '5%',
      pieces: [
        {
          min: 200,
          max: 100000,
          color: '#703A51',
          label: '200以上',
          symbol: 'roundRect',
        }, {
          min: 100,
          max: 200,
          color: '#79613F',
          label: '100-200',
          symbol: 'roundRect',
        }, {
          min: 0,
          max: 100,
          color: '#167468',
          label: '0-100',
          symbol: 'roundRect',
        }]
    },
    geo: [
      {
        map: mapName,
        zoom: zoom.value,
        aspectScale: aspectScale.value,
        layoutCenter: ["50%", `${layoutCenterY.value}%`],
        layoutSize: layoutSize.value,
        animationDurationUpdate: 0,
        label: {
          show: false,
          color: "#fff",
          fontSize: 14,
          formatter: function (params: any) {
            return params.name.slice(0, 2);
          },
        },
        itemStyle: {
          borderWidth: 3, //设置外层边框
          borderColor: "#94EDFF", //地图交界线颜色
          areaColor: "#1E4CA2", //地图背景色
        },
        // 不显示tooltip
        tooltip: {
          show: false,
        },
        // 去掉鼠标放上的效果
        emphasis: {
          label: {
            show: false,
          },
          itemStyle: {
            areaColor: "transparent",
          },
        },
      },
      {
        type: "map",
        map: mapName,
        aspectScale: aspectScale.value,
        zlevel: -1,
        // aspectScale: 1,
        zoom: zoom.value,
        layoutCenter: ["50%", `${layoutCenterY.value + 2}%`],
        layoutSize: layoutSize.value,
        silent: true,
        //立体效果
        itemStyle: {
          areaColor: 'transparent',
          borderColor: '#7ED8FC', //地图边线颜色
          borderWidth: 3,
          shadowColor: '#315996', //地图边线阴影
          shadowOffsetY: 8,
          shadowBlur: 10
        }
      },
    ],
    series: [
      {
        type: "map",
        map: mapName,
        zoom: zoom.value,
        z: 2,
        aspectScale: aspectScale.value,
        animationDurationUpdate: 0,
        showLegendSymbol: true,
        label: {
          show: true,
          color: "#fff",
          fontSize: "14px",
        },
        itemStyle: {
          areaColor: "transparent",
          borderColor: "#13b4e0",
          borderWidth: 0.2,
        },
        emphasis: {
          itemStyle: {
            show: false,
            color: "#fff",
            areaColor: "#1A307B", //鼠标移到对应区域的颜色
          },
          label: {
            show: true,
            color: "#fff",
          },
        },
        // 取消选中后的高亮状态和文字显示
        select: {
          itemStyle: {
            areaColor: "transparent",
          },
          label: {
            show: true,
            color: "#fff",
          },
        },

        layoutCenter: ["50%", `${layoutCenterY.value}%`],
        layoutSize: layoutSize.value,
        markPoint: {
          data: [
            { coord: [109.4192, 31.0579], name:'夔州街道-摄像头',value:1 }, // 直接使用坐标定位
            { coord: [109.395, 31.0413], name:'夔州街道-监听器',value:2 },
            { coord: [109.5607, 31.0574], name:'夔门街道-监听器',value:2 },
            { coord: [109.4828, 31.0816], name:'夔门街道-摄像头',value:1 },
            { coord: [109.4763, 31.035], name:'鱼复街道-摄像头',value:1 },
          ],
          symbolSize: [45,63], // 标记点的大小
          symbol:function(value: number, params: Object){
            return value===1?'image://'+img1:'image://'+img2
          } ,   // 标记的形状，这里是使用'pin'形状
          itemStyle: {
            color: 'red' // 标记的颜色
          },
          label: {
            show: false, // 是否显示标签
            formatter: '{b}' // 标签格式化，{b}代表数据名称
          },
          silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
        },
        data: [
          { name: '夔门街道', value: 22 },
          { name: '永安街道', value: 500},
          { name: '鱼复街道', value: 199 },
          { name: '夔州街道', value: 184 },
        ]
      },
      {
        type: "lines",
        color: "#fff",
        opacity: 1,
        zlevel: 0,

        label: {
          show: true,
          color: "#fff",
          opacity: 1,
          fontSize: 12,
          backgroundColor: "#0992f0",
          padding: [2, 8],
          borderRadius: 4,
          align: "center",
          height: 20,
          // 垂直居中
          verticalAlign: "middle",
        },
        tooltip: {
          show: true,
        },
        lineStyle: {
          show: true,
          type: [3, 5],
          dashOffset: 5, // 尾迹线条的长度
          width: 2, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: 0, //尾迹线条曲直度
          color: "#37F6E0", // 飞线颜色转载请附上原文出处链接及本声明。
        },
        data: [],
      },
    ],
  };
  echarts.registerMap(mapName, mapData);
}
onMounted(async () => {
  const file = await getMapJsonFile('奉节县','onlyFj');
  // console.log(file);
  initMap("chongqing", file);
});

const kpiData = ref([
  {
    label: '人民监督员参与履职案件数',
    value: 25,
    unit: '件'
  },
  {
    label: '人民监督员意见提出次数',
    value: 25,
    unit: '次'
  },
  {
    label: '人民监督员意见采纳率',
    value: 80,
    unit: '%'
  },
  {
    label: '人民监督员累计培训次数',
    value: 999,
    unit: '次'
  },
  {
    label: '不符合条件的监督员数量',
    value: 25,
    unit: '人'
  },
  {
    label: '优秀人民监督员的数量',
    value: 25,
    unit: '人'
  },
  {
    label: '十种监督方式的完成率',
    value: 100,
    unit: '%'
  },
  {
    label: '人民监督员报名数量',
    value: 999,
    unit: '人'
  }
])
</script>

<style lang="less" scoped>
.contentCenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.topTitle {
  margin-top: 17px;
  width: 100%;
  display: flex;
  justify-content: center;

  img {
    width: 250px;
    height: 22px;
  }
}

.kpiData {
  width: 100%;
  height: 278px;
  background: url('../../../assets/fengjie/icon24.png')no-repeat center/100% 100%;
  box-sizing: border-box;
  padding: 0 5px;

  .numberbox {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;

    .item {
      width: 366px;
      height: 54px;
      background: url('../../../assets/fengjie/icon26.png') 100% 100%;
      box-sizing: border-box;
      padding: 0 13px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        font-family: PangMenZhengDao;
        font-size: 20px;
        color: #FFFFFF;
        font-weight: bold;
      }

      .right {
        display: flex;
        align-items: center;
        font-size: 20px;
      }
    }
  }

  .titlebox {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    box-sizing: border-box;
    padding: 0 14px;

    span {
      font-family: PangMenZhengDao;
      font-size: 18px;
      color: #FFFFFF;
      font-weight: bold;
    }
  }

  .conbox {
    width: 100%;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .boxitem {
      width: 177px;
      height: 98px;
      box-sizing: border-box;
      padding: 0 12px;
      background: url('../../../assets/fengjie/icon28.png') 100% 100%;

      .heng1:last-child {
        border-bottom: none !important;
      }

      .active {
        color: #FFC97A !important;
      }

      .heng1 {
        width: 100%;
        height: 50%;
        border-bottom: 1px solid #56A4FF;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
          font-family: PingFangSC-SNaNpxibold;
          font-weight: bold;
          font-size: 14px;
          color: #FFFFFF;
        }

        .right {
          display: flex;
          align-items: center;

          span {
            font-family: DINAlternate-Bold;
            font-weight: bold;
            font-size: 16px;
            color: #FFFFFF;
          }

          img {
            width: 16px;
            height: 16px;
            margin-left: 2px;
          }
        }
      }
    }
  }
}

.echarttitle {
  width: 100%;
  height: 46px;
  background: url('../../../assets/fengjie/icon27.png') 100% 100%;
  margin: 30px 0 20px 0;
}

.echartbox {
  width: 100%;
  position: relative;
  .bz{
    display: flex;
    align-items: center;
    position: absolute;
    right: 200px;
    bottom: 200px;
    
    .bzitem{
      display: flex;
      align-items: center;
      margin-left: 26px;
    }
    img{
      width: 24px;
      height: 24px;
    }
    span{
      font-family: PingFangSC-SNaNpxibold;
      font-weight: 600;
      font-size: 14px;
      color: #FFFFFF;
      margin-left: 4px;
    }
  }
}

#mycharts {
  width: 750px;
  height: 700px;
  transform: translateY(-150px);
}
</style>